<template>
  <view class="city-modal">
    <cityIndexes
      @changeCity="handleChange"
      :list="cityList"
      :cityInfo="cityInfo"
    >
    </cityIndexes>
  </view>
</template>
<script>
import cityIndexes from "@/components/city-indexes/index";
export default {
  props: {
    cityInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    cityList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    cityIndexes
  },
  data() {
    return {
      list: [
        {
          title: "A",
          key: "A",
          items: [
            { name: "成都1" },
            { name: "成都2" },
            { name: "成都3" },
            { name: "成都4" }
          ]
        },
        {
          title: "B",
          key: "B",
          items: [
            { name: "重庆1" },
            { name: "重庆2" },
            { name: "重庆3" },
            { name: "重庆4" }
          ]
        },
        {
          title: "C",
          key: "C",
          items: [
            { name: "重庆1" },
            { name: "重庆2" },
            { name: "重庆3" },
            { name: "重庆4" }
          ]
        }
      ]
    };
  },
  computed: {},
  methods: {
    handleChange(value) {
      this.$emit("changeCity", value);
    }
  }
};
</script>

<style lang="scss">
.city-modal {
  height: 712px;
  @import "~taro-ui-vue/dist/style/components/toast.scss";
  @import "~taro-ui-vue/dist/style/components/indexes.scss";
  @import "~taro-ui-vue/dist/style/components/list.scss";
  .at-indexes__list {
    display: flex;
    background: #ffffff;
    &-title {
      background: #ffffff;
      width: 24px;
      color: #c0c4cc;
      font-size: 32px;
      margin-right: 42px;
    }
    .at-list {
      flex: 1;
      text-align: left;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 48px;
      color: #303133;
    }
  }
}
</style>
